<template>
    <div>
        <el-card class="box-card">
            <el-divider content-position="left"><i class="el-icon-search"></i>查询条件</el-divider>
            <el-form :inline="true" :model="searchRoleForm" class="demo-form-inline">
                <el-form-item label="角色名称">
                    <el-input v-model="searchRoleForm.name" placeholder="角色名称"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchRoleForm.status" placeholder="请选择状态">
                        <el-option label="启用" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="seacherRole" icon="el-icon-search">查询</el-button>
                    <el-button type="primary"  icon="el-icon-refresh-left" @click="resetRole">重置</el-button>
                    <el-button type="primary"  icon="el-icon-plus">新增</el-button>
                </el-form-item>
            </el-form>
            <el-divider content-position="center"><i class="el-icon-search"></i></el-divider>
            <el-table
                    :data="roleList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="roleName"
                        label="角色名"
                >
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                >
                </el-table-column>
                <el-table-column
                        prop="isDeleted"
                        label="状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                                style="display: block"
                                v-model="scope.row.isDeleted"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="0"
                                :inactive-value="1"
                                active-text="启用"
                                inactive-text="禁用"
                                @change="changeStatus(scope.row.id,scope.row.isDeleted)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="400"
                >
                    <template slot-scope="scope">
                        <el-button type="danger" size="small">删除</el-button>
                        <el-button type="success" size="small">修改</el-button>
                        <el-button type="primary" size="small" @click="setPermission(scope.row.id)">设置权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <!--设置权限对话框开始-->
            <el-dialog
                    title="设置权限"
                    :visible.sync="dialogVisible"
                    width="30%"
                    >
                <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="[2, 3]"
                        :default-checked-keys="checkPermissions"
                        :props="defaultProps">
                </el-tree>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmUpdate">确 定</el-button>
              </span>
            </el-dialog>
            <!--设置权限对话框结束-->
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return {
                data: [],
                checkPermissions:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                /////////////////////////////////////////////
                searchRoleForm:{},
                roleList:[],
                currentPage:1,
                pageSize:2,
                total:0,
                dialogVisible:false,
                roleId:undefined,
            }
        },
        created() {
            this.initRoleTable();
        },
        methods:{
            //确认修改
            confirmUpdate(){
               this.$http.get("/system/permission/confirm?roleId="+this.roleId+"&checkPermissionIds="+this.checkPermissions).then(result=>{
                        this.$message.success("设置权限成功");
                        this.dialogVisible=false;
               })
            },
            //设置权限按钮事件
            setPermission(id){
                this.roleId=id;
                 this.dialogVisible=true;
                 //1.获取所有的权限  2.当前角色具有的权限。
                this.$http.post("/system/permission/list/"+id).then(result=>{
                    this.data=result.data.data.permissionList;
                    this.checkPermissions=result.data.data.perssionIds;
                })
            },
            //重置
            resetRole(){
                this.searchRoleForm={};
                this.initRoleTable();
            },
            initRoleTable(){
                this.$http.post("/system/role/list/"+this.currentPage+"/"+this.pageSize,this.searchRoleForm).then(result=>{
                        this.roleList=result.data.data.records;
                        this.total=result.data.data.total;
                })
            },

            seacherRole(){
                this.currentPage=1;
                this.initRoleTable();
            },
            handleSizeChange(val){
               this.pageSize=val;
               this.initRoleTable();
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.initRoleTable();
            }
        }
    }
</script>

<style scoped>

</style>
